<template>
  <view class="kaogong-tools-box">
    <view class="title-box">
      <view class="su"></view>
      <view class="title">申论宝典</view>
      <view class="su"></view>
    </view>

    <view class="ul">
      <view
        v-for="(item, index) in toolList"
        :key="index"
        class="li"
        @click="pushHandle(item)"
      >
        <view class="icon">
          <image :src="item.icon" mode="scaleToFill" />
        </view>
        <view class="title">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface ToolList {
  title: string
  icon: any
  des: string
  path?: string
}
const toolList = ref<ToolList[]>([
  {
    title: '申论规范词',
    icon: '../../../static/image/shen-lun/ruler-one.png',
    des: '123',
    path: '/pages/shen-lun/gui-fan-ci/index',
  },
  {
    title: '人物素材',
    icon: `../../../static/image/shen-lun/id-card-h.png`,
    des: '123',
    path: '/pages/shen-lun/ren-wu-su-cai/index',
  },
  {
    title: '申论范文精读',
    icon: `../../../static/image/shen-lun/bookshelf.png`,
    des: '123',
    path: '/pages/shen-lun/ren-wu-su-cai/index',
  },
])

const pushHandle = (item: ToolList) => {
  console.log(item.path)
  uni.navigateTo({
    url: item.path as string,
  })
}
</script>

<style lang="scss" scoped>
.kaogong-tools-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;

  .title-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .title {
      font-weight: 700;
      font-size: 1.15rem;
    }

    .su {
      width: 50rpx;
      height: 7rpx;
      background-color: #0ecb74;
      margin: 0 30rpx;
      border-radius: 5rpx;
    }
  }

  .ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20rpx;

    .li {
      width: 47%;
      height: 200rpx;
      background-color: #f7f7f7;
      border-radius: 20rpx;
      margin: 10rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon {
        > image {
          width: 75rpx;
          height: 75rpx;
        }
      }

      .title {
        font-weight: 700;
        font-size: 0.9rem;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
